<template>
	<view class="container">
		<view class="mui-row date-row" style="display: flex;justify-content: space-around;margin-bottom: 20rpx;">
			<view v-for="(item, index) in dateList" :key="index" :class="dateTab == index ? ' date-cell' : ''" v-on:tap="changedate(index)">{{ item.Text }}</view>
		</view>
		<view v-for="(dt, index) in dateList" v-if="dateTab == index" :key="index" class="mui-row">
			<view v-for="(item, index1) in dt.ServePlayerTimeInfoList" :key="index1" class="col-time-container">
				<view v-if="item.IsWork == false" class="col-time col-time-gray mui-col-xs-3">{{ item.ServeTime }}-{{ item.NextServeTime }}</view>
				<view v-else-if="item.IsOccupy == true" class="col-time col-time-red mui-col-xs-3">{{ item.ServeTime }}-{{ item.NextServeTime }}</view>
				<view v-else v-on:tap="choosetime(item)" class="col-time mui-col-xs-3" :class="{ 'col-time-green': item.selected }">
					{{ item.ServeTime }}-{{ item.NextServeTime }}
				</view>
			</view>
		</view>
		<view class="confirm-btn bottom-change-view" @click="nextStep()">下一步</view>
	</view>
</template>

<script>
import { timeToDate, errorToShow, successToShow } from '@/config/common.js';
import { getWebServePlayerDateList } from '@/constant/customer.js';
export default {
	data() {
		return {
			servePlayerId: '',
			xudan: 0,
			dateList: [],
			dateTab: 0
		};
	},
	onLoad: function(option) {
		if (option.servePlayerId) {
			this.servePlayerId = option.servePlayerId;
			if (this.servePlayerId) {
				this.getDateList();
			}
		}
		if (option.xudan) {
			this.xudan = option.xudan;
		}
	},
	methods: {
		changedate(Inv) {
			this.dateTab = Inv;
		},
		async getDateList() {
			let res = await getWebServePlayerDateList({
				servePlayerId: this.servePlayerId
			});
			res.forEach(vm => {
				vm.ServePlayerTimeInfoList.forEach(child => {
					child.selected = false;
				});
			});
			this.dateList = res;
		},
		findIndex() {
			for (var i = 0; i < this.dateList.length; i++) {
				for (var j = 0; j < this.dateList[i].ServePlayerTimeInfoList.length; j++) {
					var item = this.dateList[i].ServePlayerTimeInfoList[j];
					if (item.selected) {
						return item.Index;
					}
				}
			}
		},
		findIndexWithObj(obj) {
			for (var i = 0; i < this.dateList.length; i++) {
				for (var j = 0; j < this.dateList[i].ServePlayerTimeInfoList.length; j++) {
					var item = this.dateList[i].ServePlayerTimeInfoList[j];
					if (item.Index == obj.Index) {
						return j;
					}
				}
			}
		},
		choosetime: function(selecedItem) {
			var self = this;
			//选中
			if (!selecedItem.selected) {
				var firstIndex = -1;
				if (self.findIndex() == undefined) {
					firstIndex = selecedItem.Index;
				} else {
					firstIndex = self.findIndex();
				}
				if (firstIndex != -1) {
					for (var i = 0; i < self.dateList.length; i++) {
						for (var j = 0; j < self.dateList[i].ServePlayerTimeInfoList.length; j++) {
							var item = self.dateList[i].ServePlayerTimeInfoList[j];

							if (
								((item.Index > firstIndex && item.Index < selecedItem.Index) || (item.Index < firstIndex && item.Index > selecedItem.Index)) &&
								(!item.IsWork || item.IsOccupy)
							) {
								item.selected = false;
								errorToShow('请选择连续时间');
								return false;
							}
						}
					}

					for (var i = 0; i < self.dateList.length; i++) {
						for (var j = 0; j < self.dateList[i].ServePlayerTimeInfoList.length; j++) {
							var item = self.dateList[i].ServePlayerTimeInfoList[j];
							if ((item.Index >= firstIndex && item.Index <= selecedItem.Index) || (item.Index <= firstIndex && item.Index >= selecedItem.Index)) {
								item.selected = true;
							}
						}
					}
				}
			} else {
				for (var i = 0; i < self.dateList.length; i++) {
					for (var j = 0; j < self.dateList[i].ServePlayerTimeInfoList.length; j++) {
						var item = self.dateList[i].ServePlayerTimeInfoList[j];
						if (item.Index >= selecedItem.Index) {
							item.selected = false;
						}
					}
				}
			}
		},
		nextStep() {
			var self = this;
			var stlist = [];
			for (var i = 0; i < self.dateList.length; i++) {
				for (var j = 0; j < self.dateList[i].ServePlayerTimeInfoList.length; j++) {
					var item = self.dateList[i].ServePlayerTimeInfoList[j];
					if (item.selected) {
						stlist.push(item.ServeDateTime);
					}
				}
			}
			if (stlist == null || stlist.length == 0) {
				errorToShow('请选择预约时间');
				return false;
			}
			if (this.xudan == 1) {
				if (stlist.length < 1) {
					errorToShow('续单不能小于半小时');
					return false;
				}
			} else {
				if (stlist.length < 2) {
					errorToShow('预约时间不能小于1小时');
					return false;
				}
			}

			var strstlist = JSON.stringify(stlist);
			uni.setStorageSync('playorder_stlist', strstlist);
			uni.navigateTo({
				url: '/packagePages/player/placeorder/index?xudan=' + this.xudan
			});
		}
	}
};
</script>

<style scoped lang="scss">
.date-row .mui-col-xs-4 {
	text-align: center;
	height: 45px;
	line-height: 45px;
	border-bottom: 1px solid $main-line-color-gray-DE;
}

.mui-col-xs-3 {
	width: 10vw;
}

.date-cell {
	border-bottom: 1px solid $main-btn-orange-color !important;
	color: $main-text-color-main-orange !important;
	padding-bottom: 10rpx;
}

#serve_date .mui-content .mui-col-xs-3 {
	padding: 3px;
}

.col-time {
	width: 160rpx;
	border-radius: 5px;
	border: 2rpx solid $main-line-color-gray-DE;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-size: 24rpx;
	color: #999999;
}

.col-time-red,
.col-time-green {
	color: #fff !important;
}

.col-time-red {
	background-color: #f44235 !important;
	border: 2rpx solid #f44235;
}

.col-time-green {
	background-color: $main-text-color-main-orange !important;
	border: 2rpx solid $main-text-color-main-orange;
}

.col-time-gray {
	background-color: #e2e2e2 !important;
}

.mui-row {
	display: flex;
	flex-wrap: wrap;
}

.col-time-container {
	margin-left: 20rpx;
	margin-top: 10rpx;
}

.confirm-btn {
	position: fixed;
	bottom: 0;
	background-color: $main-theme-color-green;
	font-size: 30rpx;
	color: #fff;
	width: 100vw;
	line-height: 120rpx;
	height: 120rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
